import React, { useState, useEffect } from 'react';
import { Select, Dropdown, Button, Popover } from 'antd';
import type { MenuProps } from 'antd';
import { SketchPicker } from '@hello-pangea/color-picker';
import cls from './tool.module.less';
import useObjectUpdate from '@/hooks/useObjectUpdate';
const { Option } = Select;
interface IProps {
  cellStyle: any;
  handClick: (value: string | any, type: string, classType?: string) => void;
}

const ToolBar: React.FC<IProps> = ({ cellStyle, handClick }: IProps) => {
  const [tkey, tforceUpdate] = useObjectUpdate('');
  const [background, setBackground] = useState<string>();
  const [color, setColor] = useState<string>();
  const [openColor, setOpenColor] = useState(false);
  const [openBackground, setOpenBackground] = useState(false);
  /** 字体样式 */
  const defaultFontWeight: string = 'normal';
  const [fontWeight, setFontWeight] = useState<string>('normal');
  const defaultFontStyle: string = 'normal';
  const [fontStyle, setFontStyle] = useState<string>('normal');
  const defaultTextDecoration: string = 'none';
  const [textDecoration, setTextDecoration] = useState<string>('none');
  const fontSizes: any = [...Array(100).keys()].slice(9);
  const [fontSize, setFontSize] = useState<string>('11');
  const [fontFamily, setFontFamily] = useState<string>('宋体');
  /** 单元格样式 */
  const [defaultClass, setDefaultClass] = useState<string>(' htMiddle htLeft');
  /** 缩进 */
  const defaultPaddingLeft: number = 4;
  const [paddingLeft, setPaddingLeft] = useState<number>(4);

  useEffect(() => {
    const styles = cellStyle?.styles || {};
    const cellClass = cellStyle?.class || '';
    setDefaultClass(
      Object.values(cellClass).length > 0 ? Object.values(cellClass).join(' ') : '',
    );
    setFontWeight(styles?.fontWeight || defaultFontWeight);
    setFontStyle(styles?.fontStyle ? styles?.fontStyle : 'normal');
    setTextDecoration(styles?.textDecoration ? styles?.textDecoration : 'none');
    setBackground(styles?.backgroundColor ? styles.backgroundColor : '#000');
    setColor(styles?.color ? styles.color : '#000');
    setFontSize(styles?.fontSize ? styles?.fontSize?.slice(0, -2) : '11');
    setFontFamily(styles?.fontFamily ? styles.fontFamily : '宋体');
    setPaddingLeft(styles?.paddingLeft ? styles.paddingLeft : defaultPaddingLeft);
    tforceUpdate();
  }, [cellStyle]);

  /** 水平对齐 */
  const alignHorizontal: any = [
    {
      label: '左对齐',
      icon: '',
      value: 'left',
      className: 'htLeft',
      type: 'horizontal',
    },
    {
      label: '居中',
      icon: '',
      value: 'center',
      className: 'htCenter',
      type: 'horizontal',
    },
    {
      label: '右对齐',
      icon: '',
      value: 'right',
      className: 'htRight',
      type: 'horizontal',
    },
  ];

  /** 垂直对齐 */
  const alignVertical: any = [
    {
      label: '顶端对齐',
      icon: '',
      value: 'top',
      className: 'htTop',
      type: 'vertical',
    },
    {
      label: '垂直居中',
      icon: '',
      value: 'middle',
      className: 'htMiddle',
      type: 'vertical',
    },
    {
      label: '底端对齐',
      icon: '',
      value: 'bottom',
      className: 'htBottom',
      type: 'vertical',
    },
  ];

  /** 字体 */
  const fonts: any = [
    {
      label: '宋体',
      value: '宋体',
    },
    {
      label: '微软雅黑',
      value: '微软雅黑',
    },
    {
      label: '黑体',
      value: '黑体',
    },
    {
      label: '仿宋',
      value: '仿宋',
    },
    {
      label: '新宋体',
      value: '新宋体',
    },
    {
      label: '隶书',
      value: '隶书',
    },
    {
      label: '楷体',
      value: '楷体',
    },
    {
      label: '幼圆',
      value: '幼圆',
    },
  ];

  /** 字体设置 */
  const setUpFontWeight = () => {
    setFontWeight(fontWeight === 'bold' ? defaultFontWeight : 'bold');
    handClick(fontWeight === 'bold' ? defaultFontWeight : 'bold', 'fontWeight');
  };

  const setUpFontStyle = () => {
    setFontStyle(fontStyle === 'italic' ? defaultFontStyle : 'italic');
    handClick(fontStyle === 'italic' ? defaultFontStyle : 'italic', 'fontStyle');
  };

  const setUpTextDecoration = () => {
    setTextDecoration(
      textDecoration === 'underline' ? defaultTextDecoration : 'underline',
    );
    handClick(
      textDecoration === 'underline' ? defaultTextDecoration : 'underline',
      'textDecoration',
    );
  };

  const borderThis = (type: string) => {
    if (type === 'border-none') {
      handClick('none', 'border', type);
    } else {
      handClick('1px solid #000000', 'border', type);
    }
  };

  const setBackgroundColor = () => {
    setOpenBackground(false);
    handClick(background, 'backgroundColor');
  };

  const setColors = () => {
    setOpenColor(false);
    handClick(color, 'color');
  };

  /** 字体样式设置 */
  const setClassName = (className: string, classType: string) => {
    let classData: string = '';
    if (classType === 'horizontal') {
      if (/htCenter|htLeft|htRight/.test(defaultClass)) {
        classData = defaultClass.replace(/htCenter|htLeft|htRight/, className);
      } else {
        classData = defaultClass + ' ' + className;
      }
    } else {
      if (/htMiddle|htTop|htBottom/.test(defaultClass)) {
        classData = defaultClass.replace(/htMiddle|htTop|htBottom/, className);
      } else {
        classData = defaultClass + ' ' + className;
      }
    }
    setDefaultClass(classData);
    handClick(className, 'className', classType);
    tforceUpdate();
  };

  const reducePaddingLeft = () => {
    let nowLeft = paddingLeft;
    if (nowLeft > 4) {
      nowLeft = nowLeft - 24;
    }
    setPaddingLeft(nowLeft);
    handClick(paddingLeft, 'paddingLeft');
  };

  const addPaddingLeft = () => {
    let nowLeft = paddingLeft;
    nowLeft += 24;
    setPaddingLeft(nowLeft);
    handClick(nowLeft, 'paddingLeft');
  };

  const handleChange = (value: any, type: any) => {
    handClick(value, type);
  };

  const items: MenuProps['items'] = [
    {
      key: 'bottom',
      label: (
        <div className={cls['border-item']} onClick={() => borderThis('bottom')}>
          <img src=""></img>
          <div>下框线</div>
        </div>
      ),
    },
    {
      key: 'top',
      label: (
        <div className={cls['border-item']} onClick={() => borderThis('top')}>
          <img src=""></img>
          <div>上框线</div>
        </div>
      ),
    },
    {
      key: 'start',
      label: (
        <div className={cls['border-item']} onClick={() => borderThis('start')}>
          <img src=""></img>
          <div>左框线</div>
        </div>
      ),
    },
    {
      key: 'end',
      label: (
        <div className={cls['border-item']} onClick={() => borderThis('end')}>
          <img src=""></img>
          <div>右框线</div>
        </div>
      ),
    },
    {
      key: 'border-none',
      label: (
        <div className={cls['border-item']} onClick={() => borderThis('none')}>
          <img src=""></img>
          <div>无框线</div>
        </div>
      ),
    },
    {
      key: 'border-all',
      label: (
        <div className={cls['border-item']} onClick={() => borderThis('all')}>
          <img src=""></img>
          <div>所有框线</div>
        </div>
      ),
    },
    {
      key: 'border-outline',
      label: (
        <div className={cls['border-item']} onClick={() => borderThis('border-outline')}>
          <img src=""></img>
          <div>外侧框线</div>
        </div>
      ),
    },
    {
      key: 'border-outline-2',
      label: (
        <div
          className={cls['border-item']}
          onClick={() => borderThis('border-outline-2')}>
          <img src=""></img>
          <div>粗外侧框线</div>
        </div>
      ),
    },
  ];

  const content = (
    <div>
      <SketchPicker
        onChange={(color) => {
          setBackground(color.hex);
        }}
      />
      <div className={cls['save-btn']} onClick={setBackgroundColor}>
        确定
      </div>
    </div>
  );

  const colorContent = (
    <div>
      <SketchPicker
        onChange={(color) => {
          setColor(color.hex);
        }}
      />
      <div className={cls['save-btn']} onClick={setColors}>
        确定
      </div>
    </div>
  );

  const handleOpenColor = (newOpen: boolean) => {
    setOpenColor(newOpen);
  };

  const handleOpenBackground = (newOpen: boolean) => {
    setOpenBackground(newOpen);
  };

  return (
    <div className={cls['toolbar-start-tab']} key={tkey}>
      <div className={cls['flex-box']}>
        <div className={cls['row-one']}>
          <Button onClick={() => handClick('onSave', 'onSave')}>保存</Button>
        </div>
      </div>

      <div className={cls['flex-box']}>
        <div className={cls['row-one']}>
          <Button onClick={() => handClick('', 'copyStyle')}>复制样式</Button>
        </div>
        <div className={cls['row-two']}>
          <Button onClick={() => handClick('', 'pasteStyle')}>粘贴样式</Button>
        </div>
      </div>

      <div className={cls['flex-box']}>
        <div className={cls['row-one']}>
          <Select
            defaultValue={fontFamily}
            style={{ width: 170 }}
            onChange={(value) => handleChange(value, 'fontFamily')}>
            {fonts.map((item: any) => {
              return (
                <Option key={item.value} value={item.value} types={'fontFamily'}>
                  {item.label}
                </Option>
              );
            })}
          </Select>
          <Select
            defaultValue={fontSize}
            style={{ width: 80, marginLeft: 4 }}
            onChange={(value) => handleChange(value + 'px', 'fontSize')}>
            {fontSizes.map((item: any) => {
              return (
                <Option key={item} value={item}>
                  {item}
                </Option>
              );
            })}
          </Select>
        </div>
        <div className={cls['row-two']}>
          <a
            className={
              fontWeight === defaultFontWeight
                ? cls['icon-action']
                : `${cls['icon-action']} ${cls['active']}`
            }
            title="加粗"
            onClick={setUpFontWeight}>
            <img
              className={cls['spreadsheet-icon']}
              src={
                ''
              }
            />
          </a>
          <a
            className={
              fontStyle === defaultFontStyle
                ? cls['icon-action']
                : `${cls['icon-action']} ${cls['active']}`
            }
            title="倾斜"
            onClick={setUpFontStyle}>
            <img
              className={cls['spreadsheet-icon']}
              src={
                ''
              }
            />
          </a>
          <a
            className={
              textDecoration === defaultTextDecoration
                ? cls['icon-action']
                : `${cls['icon-action']} ${cls['active']}`
            }
            title="下划线"
            onClick={setUpTextDecoration}>
            <img
              className={cls['spreadsheet-icon']}
              src={
                ''
              }
            />
          </a>
          <Dropdown menu={{ items }}>
            <a
              className={
                textDecoration === defaultTextDecoration
                  ? cls['icon-action']
                  : cls['icon-action']
              }
              title="边框">
              <img
                className={cls['spreadsheet-icon']}
                src={
                  ''
                }
              />
            </a>
          </Dropdown>
          <Popover
            placement="bottom"
            open={openBackground}
            onOpenChange={handleOpenBackground}
            content={content}
            trigger="click">
            <div className={cls['color-dropdown']}>
              <a className={cls['icon-a']} title="背景色">
                <img
                  className={cls['spreadsheet-icon']}
                  src={
                    ''
                  }
                />
                <div
                  className={cls['indicator']}
                  style={{ background: background }}></div>
              </a>
            </div>
          </Popover>
          <Popover
            placement="bottom"
            open={openColor}
            content={colorContent}
            onOpenChange={handleOpenColor}
            trigger="click">
            <div className={cls['color-dropdown']}>
              <a className={cls['icon-a']} title="字体颜色">
                <div className={cls['icon-x']}>A</div>
                <div className={cls['indicator']} style={{ background: color }}></div>
              </a>
            </div>
          </Popover>
        </div>
        <div className={cls['flex-box-title']}>字体</div>
      </div>
      <div className={cls['flex-box']}>
        <div className={cls['flex-horizontal']}>
          <div className={cls['column-one']}>
            <div className={cls['row-one']}>
              {alignVertical.map((align: any) => {
                return (
                  <a
                    key={align.value}
                    className={
                      defaultClass.includes(align.className)
                        ? `${cls['icon-action']} ${cls['active']}`
                        : cls['icon-action']
                    }
                    title={align.label}
                    onClick={() => setClassName(align.className, align.type)}>
                    <img className={cls['spreadsheet-icon']} src={align.icon} />
                  </a>
                );
              })}
            </div>
            <div className={cls['row-two']}>
              {alignHorizontal.map((align: any) => {
                return (
                  <a
                    key={align.value}
                    className={
                      defaultClass.includes(align.className)
                        ? `${cls['icon-action']} ${cls['active']}`
                        : cls['icon-action']
                    }
                    title={align.label}
                    onClick={() => setClassName(align.className, align.type)}>
                    <img className={cls['spreadsheet-icon']} src={align.icon} />
                  </a>
                );
              })}
            </div>
          </div>
          <div className={cls['column-two']}>
            <div className={cls['row-one']}></div>
            <div className={cls['row-two']}>
              <a
                className={cls['icon-action']}
                title="减少缩进量"
                onClick={reducePaddingLeft}>
                <img
                  className={cls['spreadsheet-icon']}
                  src={
                    ''
                  }
                />
              </a>
              <a
                className={cls['icon-action']}
                title="增加缩进量"
                onClick={addPaddingLeft}>
                <img
                  className={cls['spreadsheet-icon']}
                  src={
                    ''
                  }
                />
              </a>
            </div>
          </div>
          <div className={cls['column-divider']}></div>
        </div>
        <div className={cls['flex-box-title']}>对齐方式</div>
      </div>
    </div>
  );
};
export default ToolBar;
